<template>
    <van-nav-bar title="商品评价" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div class="aui-flex">
                <div class="aui-flex-add">
                    <img :src="detail.business.avatar_text" alt="" />
                </div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.consignee }} <em> {{ detail.mobile }}</em>
                    </h3>
                    <p>{{ detail.region_text }}{{ detail.address }}</p>
                </div>
            </div>

            <!-- 订单商品 -->
            <div class="aui-commodity-bg">
                <div class="item" v-for="item in detail.info">
                    <div class="aui-flex">
                        <div class="aui-commodity-img">
                            <img :src="item.product.thumbs_text" />
                        </div>
                        <div class="aui-flex-box">
                            <h4 class="van-ellipsis">商品名称：{{ item.product.name }}</h4>
                            <p>商品单价：￥{{ item.price }}</p>
                            <span class="aui-barter-time">七天退换</span>
                        </div>
                        <div>
                            <h5>￥{{ item.total }}</h5>
                            <p class="aui-sml-text">X {{ item.pronum }}</p>
                        </div>
                    </div>
                    <!-- 评价信息 -->
                    <div class="aui-commodity-bg">
                        <div class="item">
                            <van-cell-group inset>
                                <!-- 评分 -->
                                <van-field name="rate" label="">
                                    <template #input>
                                        <van-rate v-model="item.rate" icon="fire" void-icon="fire-o" readonly />
                                    </template>
                                </van-field>

                                <!-- 评价内容 -->
                                <van-field v-model="item.comment" rows="2" autosize label="" type="textarea" maxlength="120"
                                readonly show-word-limit />

                                <!-- 评价图片 -->
                                <span name="thumbs" label="" v-for="(thumb, index) in item.thumbs_list" :key="index">
                                    <van-image
                                        :style="{ margin: '6px' }"
                                        width="80"
                                        height="80"
                                        :src="thumb"
                                    />
                                </span>
                            </van-cell-group>
                        </div>
                    </div>
                </div>
            </div>

            
        </section>
    </section>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push({
    path:'/order/index',
    query:{
        status:detail.value.status
    }})
}
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ? proxy.$cookies.get('LoginUser') : {})
const orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
const orderproid = proxy.$route.query.orderproid ? proxy.$route.query.orderproid : 0;
const detail = ref({
    business: {},
    address: {}
})
onBeforeMount(() => {
    getOrderInfoData()
})
const getOrderInfoData = async () => {
    let result = await Api.orderInfo({
        busid: LoginUser.id,
        orderid: orderid,
        orderproid: orderproid
    });

    if (result.code == 1) {
        detail.value = result.data
        console.log(detail.value.info)
    }
}

</script>
<style>
@import url('/assets/css/info.css');
</style>